<script lang="ts" setup>
    const radioGroupValue = ref<string>("vegetable");

    const changeHandler = (data: any): void =>
    {
        log(data);
    };

</script>

<template>
    <!-- 单选框 -->
    <u-layout
        :enable-refresh="false"
        title="单选框组件示例"
    >
        <!-- 容器 -->
        <view class="container">
            <view class="line">
                <u-text text="普通单选框" />
                <view class="block">
                    <view class="ui-block-control">
                        <view class="ui-block">
                            <u-radio
                                label="水果"
                                @change="changeHandler"
                            />
                        </view>
                    </view>
                </view>
            </view>

            <view class="line">
                <u-text text="普通单选框组" />
                <view class="block">
                    <view class="ui-block-control">
                        <view class="ui-block">
                            <u-radio-group
                                v-model:value="radioGroupValue"
                                :options="[
                                    {value: 'fruit', label: '水果', id: 1, pid: '1-1'},
                                    {value: 'fish', label: '鱼类', id: 2, pid: '1-2'},
                                    {value: 'vegetable', label: '蔬菜', id: 3, pid: '1-3'},
                                    {value: 'meat', label: '肉类', disabled: true, id: 4, pid: '1-4'},
                                    {value: 'egg', label: '蛋类', id: 5, pid: '1-5'}
                                ] as RadioGroupInterface[]"
                                name-tag="label"
                                value-tag="value"
                                @change="changeHandler"
                            />
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <!-- //容器 -->
    </u-layout>
    <!-- //单选框 -->
</template>

<style lang="scss" scoped>
    // 容器
    .container
    {
        .line
        {
            .title
            {
                font-size: 14px;
                line-height: 20px;
            }

            .block
            {
                overflow: hidden;
                margin-top: 4px;
            }

            &:not(:first-child)
            {
                margin-top: 16px;
            }
        }
    }
</style>